<template>
  <div>
    <div>
      <el-table
        :data="books"
        style="width: 100%"
      >
        <el-table-column type="expand" class="book_box">
          <template slot-scope="books">
            <el-image class="book_box_item" :src="books.row.img" stytle="margin-left: 15px" />
            <el-upload-list class="book_box_item">
              <p>书名：{{ books.row.title }}</p>
              <p>作者：{{ books.row.author }}</p>
              <p>出版日期: {{ books.row.pubdate }}</p>
              <p>制造商:{{ books.row.produce }}</p>
              <p>版次：{{ books.row.edition }}</p>
              <p>用纸：{{ books.row.paper }}</p>
            </el-upload-list>
            <el-upload-list class="book_box_item">
              <p>开本：{{ books.row.format }}</p>
              <p>包装：{{ books.row.binding }}</p>
              <p>ISBN：{{ books.row.isbn }}</p>
              <p>简述：{{ books.row.gist }}</p>
            </el-upload-list>
          </template>
        </el-table-column>
        <el-table-column
        label="图书id"
        prop="id"></el-table-column>
        <el-table-column
          label="图书ISBN号"
          prop="isbn"
        />
        <el-table-column
          label="书名"
          prop="title"
        />
        <el-table-column
          label="二级分类名"
          prop="categoryName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="books">
            <el-button @click="deleteById(books.row.id)" type="danger">删除</el-button>
            <el-button @click="updatBookShow(books.row)" type="info">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="eidtDialog">
        <el-form :model="book">
          <el-form-item>
            <el-input prefix="书名" v-model="book.title">
              <template slot="prepend">书名</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input prefix="作者" v-model="book.author" >
              <template slot="prepend">作者</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input prefix="出版商" v-model="book.pusher">
              <template slot="prepend">出版商</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            简介：
            <el-input prefix="简介" v-model="book.gist" type="textarea" rows="5">
              <template slot="prepend">简介</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="book.hot">
              <template slot="prepend">热度值</template>
            </el-input>
          </el-form-item>
          <el-select v-model="category1Id" placeholder="请选择" @change="category1Change(category1Id)">
            <el-option
              v-for="item in category1"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="book.category2Id" placeholder="请选择">
            <el-option
              v-for="item in category2"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="eidtDialog = false">取消</el-button>
          <el-button type="primary" @click="updataBook">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {ApiService} from "@/api/apiService";

export default {
  name: 'Book',
  data() {
    return {
      books: [],
      eidtDialog:false,
      book:{},
      category1Id:1,
      category2:[],
      category1:[],
    }
  },
  mounted() {
     this.list();
     this.getCategory1List()
     this.getCategory2ListByca1(1)
  },
  methods: {
    //获取图书列表
    list() {
      const api = new ApiService("/book")
      api.get().then(res=> {
        this.books = res.data.data;
        console.log(res);
      })
    },
    //根据图书id删除
    deleteById(id) {
      const api = new ApiService("/book/delete")
      api.getParams( {
        id:id,
      }).then(res=>{
        this.list()
      })
    },
    //修改图书
    updatBookShow(book) {
      console.log(book)
      this.book = book;
      this.eidtDialog = true
    },
    //修改图书
    updataBook() {
      const api = new ApiService("/book/update")
      api.post(this.book).then(res=>
        {
          if(res.data.code == 200) {
            this.$notify({
              message:"修改成功",
            })
            this.list();
            this.eidtDialog = false
          }
        }
      )
    },
    //根据分类1获取分类2
    getCategory2ListByca1(id) {
      console.log("id"+id)
      const api = new ApiService("/category2/byCategory1")
      api.getParams({
        id:id
      }).then(res => {
        console.log(res)
        this.category2 = res.data.data;
        this.isCategory2 =true;
      })
    },
    //获取全部一级分类
    getCategory1List() {
      const api = new ApiService("/iteam/catalog1")
      api.get().then(res => {
        console.log(res.data)
        this.category1 = res.data.data;
        console.log(this.category1)
      })
    },
    category1Change(id) {
      console.log(id)
      console.log("category1 chang to " +id)
      this.getCategory2ListByca1(id);
    }

  },
}
</script>
.el-table__expanded-cell {
  display: inline-flex;
}
.book_box_item {
  margin-left: 100px;
  width: 200px;
  height: 200px;
}
</style>
